<template>
    <div>
        <el-row>
            <el-col :lg="8" :xl="6">
                <el-form-item label="巡查类型" prop="type">
                    <el-select v-model="obj.type" clearable placeholder="请选择" style="width: 100%" @change="handleClearImg">
                        <el-option v-for="item in PatrolTypeExclude8" :key="item.id" :label="item.name" :value="item.id" />
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
                <el-form-item label="缺陷病害类型" prop="defectDiseaseType">
                    <el-select v-model="obj.defectDiseaseType" clearable placeholder="请选择" style="width: 100%">
                        <el-option v-for="item in DefectDiseaseTypeOptions" :key="item.value" :label="item.label" :value="item.label" />
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
                <el-form-item label="公路名称" prop="highwayCode">
                    <RoadSelect :value.sync="obj.highwayCode" :name.sync="obj.highwayName" :stake.sync="obj.roadStake" @change="obj.facilityCode = []"></RoadSelect>
                </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
                <el-form-item label="方向" prop="direction">
                    <el-select v-model="obj.direction" clearable placeholder="请选择" style="width: 100%">
                        <el-option v-for="item in directions" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
                <el-form-item label="巡查部门" prop="deptId">
                    <OrgSelect :is-filter="true" :value.sync="obj.deptId" :name.sync="obj.deptName" @change="handleDepartChange"></OrgSelect>
                </el-form-item>
            </el-col>
            <el-col :xl="12" :lg="16" style="display: flex">
                <el-col style="padding: 0">
                    <el-form-item label="巡查范围" prop="startStake1">
                        <el-input v-model.trim="obj.startStake1" :disabled="!obj.highwayCode" placeholder="请输入" maxlength="3" @change="obj.endStake1 = ''">
                            <div slot="prepend" class="input-unit">K</div>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col style="padding: 0">
                    <el-form-item
                        class="spe-item"
                        label-width="20px"
                        :disabled="!obj.highwayCode"
                        label="+"
                        prop="endStake1"
                        :rules="useCheckStake(obj.highwayCode, 1, obj.startStake1, obj.roadStake, true)"
                    >
                        <el-input v-model.trim="obj.endStake1" :disabled="!obj.highwayCode && !obj.startStake1" maxlength="3" placeholder="请输入" />
                    </el-form-item>
                </el-col>
                <el-col style="padding: 0">
                    <el-form-item class="spe-item" label-width="50px" label="~" prop="startStake2">
                        <el-input v-model.trim="obj.startStake2" placeholder="请输入" maxlength="3" :disabled="!obj.highwayCode" @change="obj.endStake2 = ''">
                            <div slot="prepend" class="input-unit">K</div>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col style="padding: 0">
                    <el-form-item
                        class="spe-item"
                        label-width="20px"
                        label="+"
                        prop="endStake2"
                        :rules="useCheckStake(obj.highwayCode, 1, obj.startStake2, obj.roadStake, true)"
                    >
                        <el-input v-model.trim="obj.endStake2" maxlength="3" :disabled="!obj.highwayCode && !obj.startStake2" placeholder="请输入" />
                    </el-form-item>
                </el-col>
            </el-col>
            <el-col :lg="8" :xl="6">
                <el-form-item label="巡查日期" prop="inspectDate">
                    <el-date-picker
                        v-model="obj.inspectDate"
                        type="date"
                        value-format="yyyy-MM-dd"
                        :editable="false"
                        range-separator="至"
                        placeholder="请选择日期"
                        style="width: 100%"
                    />
                </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
                <el-form-item label="巡查时段" prop="inspectTime">
                    <el-time-picker
                        v-model="obj.inspectTime"
                        is-range
                        size="small"
                        format="HH:mm"
                        value-format="HH:mm"
                        range-separator="至"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间"
                        style="width: 100%"
                    />
                </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
                <el-form-item label="天气" prop="weather">
                    <el-select v-model="form.weather" clearable placeholder="请选择" style="width: 100%">
                        <el-option v-for="item in weather" :key="item.id" :label="item.name" :value="item.id" />
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
                <el-form-item label="巡查人员" prop="inspectUsers">
                    <!-- 多选 -->
                    <UserSelect :id="departId" :value.sync="obj.inspectUsers" :multiple="true"></UserSelect>
                </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
                <el-form-item label="负责人" prop="principal">
                    <UserSelect :is-all="true" :value.sync="obj.principal"></UserSelect>
                </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
                <el-form-item label="位置类型" prop="locationType">
                    <el-select v-model="obj.locationType" clearable placeholder="请选择" style="width: 100%" @change="locationTypeChange">
                        <el-option v-for="item in LocationOptions" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col v-if="obj.locationType === 1" :lg="8" :xl="6">
                <el-form-item label="缺陷位置" prop="facilityCode">
                    <!-- <FacilitySelect :value.sync="obj.facilityCode" :params="params" :name.sync="obj.facilityName" :lng-lat.sync="obj.lngLatList" /> -->
                    <NewFacilitySelect
                        :value.sync="obj.facilityCode"
                        :params="params"
                        :name.sync="obj.facilityName"
                        :lng-lat.sync="obj.lngLatList"
                    />
                </el-form-item>
            </el-col>
            <el-col v-if="obj.locationType === 2" :xl="12" :lg="16" style="display: flex">
                <el-form-item label="桩号" prop="stake1">
                    <el-input
                        v-model.trim="obj.stake1"
                        :disabled="!obj.highwayCode || !obj.direction"
                        placeholder="请输入"
                        maxlength="3"
                        @change="$set(obj, 'stake2', '')"
                    >
                        <div slot="prepend" class="input-unit">K</div>
                    </el-input>
                </el-form-item>
                <el-form-item
                    class="spe-item spe-label"
                    label-width="20px"
                    :disabled="!obj.highwayCode || !obj.direction"
                    label="+"
                    prop="stake2"
                    :rules="useCheckStake(obj.highwayCode, obj.direction, obj.stake1, obj.roadStake)"
                >
                    <el-input v-model.trim="obj.stake2" :disabled="!obj.highwayCode && !obj.stake1" maxlength="3" placeholder="请输入" />
                </el-form-item>
            </el-col>
            <el-col v-if="obj.locationType === 3" :xl="12" :lg="16" style="display: flex">
                <el-form-item label="桩号范围" prop="startStakeNo1">
                    <el-input
                        v-model.trim="obj.startStakeNo1"
                        :disabled="!obj.highwayCode || !obj.direction"
                        placeholder="请输入"
                        maxlength="3"
                        @change="$set(obj, 'endStakeNo1', '')"
                    >
                        <div slot="prepend" class="input-unit">K</div>
                    </el-input>
                </el-form-item>
                <el-form-item
                    class="spe-item spe-label"
                    label-width="20px"
                    :disabled="!obj.highwayCode || !obj.direction"
                    label="+"
                    prop="endStakeNo1"
                    :rules="useCheckStake(obj.highwayCode, obj.direction, obj.startStakeNo1, obj.roadStake)"
                >
                    <el-input v-model.trim="obj.endStakeNo1" :disabled="!obj.highwayCode && !obj.startStake1" maxlength="3" placeholder="请输入" />
                </el-form-item>
                <el-form-item class="spe-item spe-label" label-width="50px" label="~" prop="startStakeNo2">
                    <el-input
                        v-model.trim="obj.startStakeNo2"
                        placeholder="请输入"
                        maxlength="3"
                        :disabled="!obj.highwayCode"
                        @change="$set(obj, 'endStakeNo2', '')"
                    >
                        <div slot="prepend" class="input-unit">K</div>
                    </el-input>
                </el-form-item>
                <el-form-item
                    class="spe-item spe-label"
                    label-width="20px"
                    label="+"
                    prop="endStakeNo2"
                    :rules="useCheckStake(obj.highwayCode, obj.direction, obj.startStakeNo2, obj.roadStake)"
                >
                    <el-input v-model.trim="obj.endStakeNo2" maxlength="3" :disabled="!obj.highwayCode && !obj.startStake2" placeholder="请输入" />
                </el-form-item>
            </el-col>
            <el-col v-if="obj.locationType === 4" :xs="24" :lg="24" :xl="24">
                <el-form-item label="缺陷说明" prop="problemDescription">
                    <el-input v-model="obj.problemDescription" placeholder="请输入" :rows="3" type="textarea" show-word-limit maxlength="200"></el-input>
                </el-form-item>
            </el-col>
            <el-col v-if="obj.locationType && obj.locationType !== 4" :xs="24" :lg="24" :xl="24">
                <el-form-item label="检查情况" prop="checkSituation">
                    <el-input v-model="obj.checkSituation" placeholder="请输入不超过200个字" :rows="3" type="textarea" show-word-limit maxlength="200"></el-input>
                </el-form-item>
            </el-col>
            <el-col v-if="obj.locationType && obj.locationType !== 4" :xs="24" :lg="24" :xl="24">
                <el-form-item label="异常描述" prop="abnormalDescription">
                    <el-input v-model="obj.abnormalDescription" placeholder="请输入不超过200个字" :rows="3" type="textarea" show-word-limit maxlength="200"></el-input>
                </el-form-item>
            </el-col>
            <el-col v-if="obj.locationType && obj.locationType !== 4" :xs="24" :lg="24" :xl="24">
                <el-form-item label="判定" prop="decide">
                    <el-select v-model="obj.decide" clearable placeholder="请选择" style="width: 100%">
                        <el-option v-for="item in LevelOptions" :key="item.id" :label="item.label" :value="item.label" />
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col v-if="obj.locationType && obj.locationType !== 4" :xs="24" :lg="24" :xl="24">
                <el-form-item label="养护措施建议" prop="suggestion">
                    <el-select v-model="obj.suggestion" clearable placeholder="请选择" style="width: 100%">
                        <el-option v-for="item in AdviceOptions" :key="item.id" :label="item.label" :value="item.label" />
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :xs="24" :lg="24" :xl="24">
                <el-form-item label="备注" prop="remark">
                    <el-input v-model="obj.remark" placeholder="请输入不超过100个字" :rows="3" type="textarea" show-word-limit maxlength="100"></el-input>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row v-if="obj.type === 1 || obj.type === 2">
            <el-col :xs="24" :lg="24" :xl="24">
                <el-form-item>
                    <span slot="label">上传图片<br>（最多10张）</span>
                    <ImageUploadNew ref="imageUpload" :list.sync="photos" :limit="10" :over.sync="imageUploadOver"></ImageUploadNew>
                </el-form-item>
            </el-col>
            <el-col v-for="(item, index) in photos" :key="item.uid" :span="24">
                <el-form-item :label="`图片${index+1}说明`">
                    <el-input v-model.trim="photos[index].picDesc" maxlength="100" show-word-limit clearable placeholder="请输入" />
                </el-form-item>
            </el-col>
        </el-row>
        <el-row v-else>
            <el-col :xs="24" :lg="24" :xl="24">
                <el-form-item>
                    <span slot="label">上传图片<br>（最多10张）</span>
                    <ImageUpload ref="imageUpload" :list.sync="photos" :limit="10" :over.sync="imageUploadOver"></ImageUpload>
                </el-form-item>
            </el-col>
        </el-row>
    </div>
</template>
<script>
import { PatrolTypeExclude8, LocationOptions, AdviceOptions, LevelOptions } from '../../../constants'
import { DirectionTwoWayOptions } from '@/config/constants'
import useCheckStake from '@/hooks/useCheckStake'
import { RoadModel } from '@/models'
import { mapState } from 'vuex'
import { DefectDiseaseTypeOptions } from '@/views/maintenance-decision/constants'

export default {
    props: {
        form: {
            type: Object,
            required: true,
            default: () => {}
        }
    },
    data() {
        return {
            DefectDiseaseTypeOptions,
            obj: {
                ...this.form,
                facilityCode: [],
                facilityName: '',
                lngLatList: [],
                problemDescription: '',
                checkSituation: '',
                abnormalDescription: '',
                decide: '',
                suggestion: '',
                remark: ''
            },
            departId: 0,
            roadModel: new RoadModel(),
            roadOptions: [],
            imageUploadOver: false,
            photos: []
        }
    },
    computed: {
        ...mapState('types', ['weather']),
        PatrolTypeExclude8() {
            return PatrolTypeExclude8
        },
        useCheckStake() {
            return useCheckStake
        },
        directions() {
            return DirectionTwoWayOptions
        },
        LocationOptions() {
            return LocationOptions
        },
        params() {
            const params = {
                roadCode: this.obj.highwayCode,
                direction: this.obj.direction
            }
            return params
        },
        AdviceOptions() {
            return AdviceOptions
        },
        LevelOptions() {
            return LevelOptions
        }
    },
    watch: {
        obj() {
            console.log(11111)
            this.$emit('update:form', this.obj)
        },
        'obj.deptId'(val) {
            if (val.length) {
                this.departId = val[val.length - 1]
            }
        },
        'obj.type'(newval, oldval) {
            // 如果是1和2，日常和夜间互相切换，图片说明不清空，否则清空
            if (!((newval === 1 && oldval === 2) || (newval === 2 && oldval === 1))) {
                this.photos = []
            }
        }
    },
    created() {
        this.$store.dispatch('types/query', 'weather')
    },
    methods: {
        handleClearImg(value) {
            console.log(value)
        },
        locationTypeChange() {
            // 取不到$parent
            this.$emit('locationTypeChange')
        },
        handleDepartChange() {
            this.obj.inspectUsers = []
        },
        facilityChange(val) {
            if (val.length >= 2) {
                this.obj.facilityCode = val[1]
            }
        }
    }
}
</script>
<style scoped lang="scss">
.spe-item {
    ::v-deep {
        .el-form-item__label {
            text-align: center;
            padding: 0;
            &::before {
                display: none;
            }
        }
        .el-input,
        .el-input__inner {
            min-width: auto !important;
        }
    }
}
</style>
